<template>
	<view class="search-container">

		<!-- #ifdef MP -->
		<!-- 小程序搜索框, 不要少了 ref="searchBar" 后面要用 -->
		<!-- 注意：navBack() 不要少了括号，不然后退不了（mixin.js定义了） -->
		<uni-search-bar ref="searchBar" :focus="focus" radius="100" placeholder="搜索你想要的内容123" clearButton="auto"
			cancelButton="always" @confirm="doSearch" @cancel="navBack()" />
		<!-- #endif -->

		<!-- focus 是否获取焦点 -->
		<searchInput :focus="focus" radius="100" placeholder="搜索你想要的内容" clearButton="auto" cancelButton="always"
			@confirm="doSearch" @cancel="navBack()" />
		<!-- 热门历史关键词提示组件 -->
		<keyword @doSearch="doSearch" v-if="!searched"></keyword>

		<tab-bar v-model="tabIndex" v-if="searched"></tab-bar>
		<down-bar v-if="searched" :params="params"></down-bar>

	</view>
</template>

<script>
	import searchInput from '../../components/uni-search-bar.vue'
	import keyword from './components/keyword.vue'
	import tabBar from './components/tab-bar.vue'
	import downBar from './components/down-bar.vue'


	// 当前页面实例变量，声明外面提高性能
	let currentWebview = null

	export default {
		components: {
			keyword,
			searchInput,
			tabBar,
			downBar
		},
		data() {
			return {
				params: '', // 其他页面跳转到此页面带上的参数,
				content: '', //搜索内容
				focus: false, //搜索框获取焦点
				searched: false, //是否搜索过，搜索过隐藏keyword组件内容
				mpHeight: null, //小程序右侧胶囊高度
				focus: false, //搜索框获取焦点
				content: null, //搜索内容
				searched: false, //是否搜索过，搜索过隐藏keyword组件内容

				tabIndex: 0, // 当前所在标签索引值 ++++
			}
		},

		onLoad(option) {
			// #ifdef APP-PLUS
			currentWebview = this.$mp.page.$getAppWebview()
			// #endif

			// 获取其他页面跳转过来带的参数，
			if (option.params) {
				// 转换对象
				this.params = JSON.parse(option.params)
				console.log('params', this.params)
				// 有参数，则开始搜索
				this.doSearch()
			} else {
				// #ifdef APP-PLUS
				currentWebview.setTitleNViewSearchInputFocus(true)
				// #endif
			}

			// #ifdef MP
			// 页面加载即获取焦点，真机测试才有效 +++
			this.focus = true
			// #endif
		},
		methods: {
			// 搜索
			doSearch(obj) {
				console.log(123);
				// obj有数据，则获取
				this.content = obj && obj.value ? obj.value : this.content

				// 标识搜索过，隐藏keyword.vue组件内容
				this.searched = true

				// #ifdef MP
				// 传递给小程序 搜索框, 注意上面取 `ref="searchBar"`
				this.$refs.searchBar.searchVal = this.content
				// #endif

				uni.showLoading({
					title: '加载中'
				});


				uni.showLoading()
				this.storageHistory()
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
			},
			// 关键字保存本地 ++++++++++++++
			storageHistory() {
				const key = 'history_list'
				uni.getStorage({
					key, // 等价于 key: key,
					success: (res) => { //注意箭头函数
						// console.log('获取成功', res.data);
						// 查询到原历史记录，当前输入的是否存在，不存在添加到第1个元素，存在不添加
						this.content && res.data.indexOf(this.content) < 0 &&
							res.data.unshift(this.content)
						// 保存到历史记录
						uni.setStorageSync(key, res.data)
					},
					fail: (error) => { //注意箭头函数
						// 没有历史数据。
						// 当前有输入内容，直接保存，注意是数组
						this.content && uni.setStorageSync(key, [this.content])
					}
				})
			},
		},



	}
</script>
<style lang="scss">
	/* 不要少了scss */


	.search-container {
		width: 750rpx;
		/* 全屏，不然后面`下拉筛选粘组件`粘顶会失效 */
		margin: 0;
		padding: 0;
	}
</style>
